| 前端 i18n 最佳实践：在 React 中使用 i18next | 您所在的位置：网站首页 › select source翻译 › 前端 i18n 最佳实践：在 React 中使用 i18next |
前端 i18n 最佳实践：在 React 中使用 i18next
|
我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第3篇文章，点击查看活动详情 本文将会介绍 i18n 的业界最佳实践。 如果你对 i18n 的基本概念不够了解，可以参考我的上一篇文章。 聊聊什么是 i18n？JavaScript 中的 i18n 基本概念 在上一章节中介绍了 JavaScript 原生的 i18n API，但是它并没有被广泛采用。这一篇文章我来聊聊业界使用广泛的解决方案。 目前业界最流行的 i18n 方案都需要处理两个东西： 资源文件 路由 资源文件i18n 这个问题在前后端未分离的时代就一直存在。 实现 i18n，可以分为后端 runtime 的策略和前端 runtime 的策略。 先讲一下后端 runtime 的策略。 比如在 JSP 和 PHP 模板引擎中就有大量基于这种策略实现的 i18n。 它会把网页中要显示的内容提前翻译成多种语言。 当用户请求网页时，由用户自己选择语言，或者在第一次用户没选择语言时使用服务端接收到的 accept-language 请求头字段来确定用户的语言。 之后去加载写死的模板字符串资源文件，去替换文本内容。 拿代码举个大概的例子。 这是原来没有做国际化的代码。 这是一段简单的文本做完国际化后。 {t('simpleContent')}其实就是提供了一个 t 函数（就是 translation 的缩写），它可以翻译文本。 资源文件可以是 JSON，或者是其他格式的文件，内容大概如下： { "en": { "simpleContent": "Just simple content" }, "zh": { "simpleContent": "这是一段简单的文本" } }前端 runtime 的策略原理和上面的类似，就是提前定义一堆 JavaScript 对象，然后去动态获取它的值而已。 这么看来似乎前端 runtime 策略似乎更加简单，但在实际上几乎没有什么人会用这种方案，因为它有一个致命缺点，就是不支持 SEO。 国际化的目的本来就是服务更多的用户群体，考虑做国际化的站点，基本上也会考虑做 SEO。 路由早期的网站很多都没有考虑路由的问题，所有国家的用户都访问同一个网站。但是当中国的用户分享了他老婆网址，他老婆精通中英双语，但是她老婆的浏览器默认是英语，对方想直接看到中文的内容，还需要手动切换语言，很麻烦。而且有些语言的书写和排列都和英语、汉语这类语言不一样，需要单独调整样式。 基于这些需求，现代的网站在做国际化时都喜欢区分路由，比如 web.dev 的网址，中文访问是这个地址：web.dev/i18n/zh/web…，英文访问是这个地址：web.dev/i18n/en/web…。 甚至还可以转发网址，比如中国用户访问 xxx.cn，美国用户访问 xxx.com。 最流行的 i18n 库从 npm 周下载量上看，i18next 无疑是最流行的 i18n 库。 i18next 之所以如此受欢迎，是因为 i18next 不仅仅是针对 React 或者某个框架而设计的，甚至都不是针对 Web 这个平台而设计的。它可以用在 Node.js、Deno、.NET、php、ruby、IOS、Android 等一系列平台上。 而且 i18next 也足够老，从 2011 年末就开源了，比 React、Vue 这些前端框架都要老，经过了很长时间的考验，基本上没有什么 i18n 领域的问题是它解决不了的。 在 React 中使用 i18next为了更好的适配 React 这个框架，社区又基于 i18n 开发了 react-i18next 这个库。 接下来我会完成一个简单的案例，带大家快速学习 react-i18next。 基本用法首先创建项目。 npx create-react-app react-i18n然后安装 i18-next 的依赖项。 npm i i18next react-i18next i18next-browser-languagedetector i18next 提供了翻译的基本能力。 react-i18next 是 i18next 的一个插件，用来降低 react 的使用成本。 i18next-browser-languagedetector 是用来检测浏览器语言的插件。创建 i18n.js，具体的注释都在代码中。 import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import LanguageDetector from 'i18next-browser-languagedetector'; i18n // 检测用户当前使用的语言 // 文档: https://github.com/i18next/i18next-browser-languageDetector .use(LanguageDetector) // 注入 react-i18next 实例 .use(initReactI18next) // 初始化 i18next // 配置参数的文档: https://www.i18next.com/overview/configuration-options .init({ debug: true, fallbackLng: 'en', interpolation: { escapeValue: false, }, resources: { en: { translation: { // 这里是我们的翻译文本 } } } }); export default i18n;在 index.js 中导入 i18n.js。 import './i18n.js'重新编写 App.js 中的内容。 import { useTranslation, Trans } from 'react-i18next'; function App() { const { t } = useTranslation(); return ( {t('welcome')} 作者是: {Date.now()} ); } export default App;其中使用到了 useTranslation 这个 Hooks，以及 Trans 这个组件。 useTranslation 返回的对象包含一个 t 方法，这个方法可以翻译文本。 Trans 可以翻译一个组件树。 打开浏览器，这时显示下面的内容： 我们去 i18n.js 中添加翻译。 import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import LanguageDetector from 'i18next-browser-languagedetector'; i18n // 检测用户当前使用的语言 // 文档: https://github.com/i18next/i18next-browser-languageDetector .use(LanguageDetector) // 注入 react-i18next 实例 .use(initReactI18next) // 初始化 i18next // 配置参数的文档: https://www.i18next.com/overview/configuration-options .init({ debug: true, fallbackLng: 'en', interpolation: { escapeValue: false, }, resources: { en: { translation: { // 这里是我们的翻译文本 welcome: 'Welcome to my website', author: `Author is：code and beast`, } }, zh: { translation: { welcome: '欢迎来到我的网站', author: `作者是：代码与野兽`, } } } }); export default i18n;现在显示正常了。 接下来我们再来测试浏览器是英文的情况。 我用的是 Chrome 浏览器，其他浏览器操作步骤类似。 在浏览器设置中搜索 languages。 点击 add languages，选择 English。 然后需要 Move to the top，把 English 设置为首选语言。 重启浏览器。 这时就被翻译成英语了。 接下来我们实现一个语言切换的功能。 import { useTranslation, Trans } from 'react-i18next'; const lngs = { en: { nativeName: 'English' }, zh: { nativeName: '中文' } }; function App() { const { t, i18n } = useTranslation(); return ( { i18n.changeLanguage(evt.target.value) }}> {Object.keys(lngs).map((lng) => ( ))} {t('welcome')} 作者是: {Date.now()} ); } export default App;核心代码是 useTranslation 返回的 i18n.changeLanguage 方法，这个方法可以修改用户的当前语言。 不过 i18next-browser-languagedetector 会自动尝试检测浏览器的默认语言，我们可以把用户上次手动选择的语言存储到 localStorage 中，下次访问页面时使用上次存储的语言作为首选语言。 插值表达式这时你可能会问了，当我们碰到要翻译的内容中存在变量时该怎么办？ i18next 提供了插值的用法。 我们在 t 函数中传递第二个参数，它是一个对象。 比如我们要显示当前时间。 首先安装 dayjs。 npm i day.js添加一个元素。 {t('currentTime', { time: dayjs().format('MM/DD/YYYY') })}然后在 i18n.js 中添加翻译的文本。 { resources: { en: { translation: { // 这里是我们的翻译文本 welcome: 'Welcome to my website', author: `Author is：code and beast`, currentTime: 'Current time is {{time}}', } }, zh: { translation: { welcome: '欢迎来到我的网站', author: `作者是：代码与野兽`, currentTime: '当前时间是 {{time}}', } } } }插值表达式的语法是使用两个大花括号包裹属性名。 格式化如果你想对插值进行格式化，比如中文的日期显示 2022-09-05，英文日期显示05/09/22。该怎么做呢？ i18next 提供了格式化的能力。 首先差值表达式支持第二个值，它是格式化器的名字。 { resources: { en: { translation: { // 这里是我们的翻译文本 welcome: 'Welcome to my website', author: `Author is：code and beast`, currentTime: 'Current time is {{time, DD/MM/YY}}', } }, zh: { translation: { welcome: '欢迎来到我的网站', author: `作者是：代码与野兽`, currentTime: '当前时间是 {{time, YYYY-MM-DD}}', } } } }然后添加两个格式化器。 i18n.services.formatter.add('DD/MM/YY', (value, lng, options) => { return dayjs(value).format('DD/MM/YY') }); i18n.services.formatter.add('YYYY-MM-DD', (value, lng, options) => { return dayjs(value).format('YYYY-MM-DD') });这样就实现了插值文本的格式化。 除了上面介绍的用法外，i18next 还有更多的功能，比如语境、复数、命名空间等。这里就不多做介绍了，详细的内容可以参考 i18next 的文档。 将翻译文件与代码进行拆分通常来说，翻译的工作不是程序员干的，而是有专业的业务团队去负责翻译，因为他们对业务术语等更加了解。 为了方便维护，我们可以选择使用 json 文件来作为保存翻译文本的资源文件。 首先需要安装一个库：i18next-http-backend。 npm install i18next-http-backend然后修改 i18n.js 的内容，将这个插件用上，并且删除掉原来的 resources 字段。 import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import LanguageDetector from 'i18next-browser-languagedetector'; import dayjs from 'dayjs' import Backend from 'i18next-http-backend'; i18n .use(Backend) // 检测用户当前使用的语言 // 文档: https://github.com/i18next/i18next-browser-languageDetector .use(LanguageDetector) // 注入 react-i18next 实例 .use(initReactI18next) // 初始化 i18next // 配置参数的文档: https://www.i18next.com/overview/configuration-options .init({ debug: true, fallbackLng: 'en', interpolation: { escapeValue: false, }, }); // new usage i18n.services.formatter.add('DD/MM/YY', (value, lng, options) => { return dayjs(value).format('DD/MM/YY') }); i18n.services.formatter.add('YYYY-MM-DD', (value, lng, options) => { return dayjs(value).format('YYYY-MM-DD') }); export default i18n;然后在 public 下面创建 locales 目录，在这个目录下创建和语言缩写对应的文件夹，其中放置 translation.json 文件。这个命名是约定好的，backend 插件会去按照这个路径请求资源文件。 翻译的内容和 resources 的内容一模一样。 比如 zh/translation.json 的内容如下： { "welcome": "欢迎来到我的网站", "author": "作者是：代码与野兽", "currentTime": "当前时间是 {{time, YYYY-MM-DD}}" }但是这样会让资源文件以异步的方式进行请求，如果网络存在波动，那么有可能请求资源文件失败。 所以我们还要使用 Suspense 组件处理加载出错。 import { Suspense } from 'react'; function App() { // ... } export default function WrappedApp() { return ( ); } locize 平台i18next 有自己的翻译平台 locize.app/。 这个平台可以帮助我们整合翻译服务、追踪翻译的更改、版本、机器翻译等一系列功能，它会让我们管理翻译资源文件就像管理代码一样。 当我们的全球化业务非常庞大时，采用这个平台来处理 i18n 问题会更加轻松。 文中介绍的代码部分均为客户端 runtime 翻译，在更多的实际情况下我们会选择服务端 runtime 翻译，这时可能会使用 nextjs 这种 SSR 框架来处理 i18n。 更多的内容我会在后续的文章中讲解。 |
【本文地址】